---
import type { FrameType } from "@/types/advancement";
import task from "@/assets/advancement/task.png";
import challenges from "@/assets/advancement/challenges.png";
import goal from "@/assets/advancement/goal.png";

export interface Props {
  /** 命名空间id，会尝试自动提取 */
  id: string;
  /** 图标，会尝试自动提取  */
  icon: string;
  /** 进度名字，会尝试自动提取  */
  title: string;
  /** 进度英文名字，会尝试自动提取  */
  enTitle: string;
  /** 成就类型，会尝试自动提取 */
  frame: FrameType;
  /** 描述，会尝试自动提取 */
  description: string;
  /** 上游进度，直接传入一个名字，比如 `来硬的`；会尝试自动提取 */
  parent?: string;
  /** 实际需求，会尝试自动生成，如果生成失败会抛出警告，不影响页面正常生成。字符串将作为HTML插入页面 */
  require: string;
}

const {
  icon,
  id,
  title,
  enTitle,
  description,
  frame = "task",
  parent,
  require,
} = Astro.props;

let FinalFrame: ImageMetadata = task;

switch (frame) {
  case "goal":
    FinalFrame = goal;
    break;
  case "challenge":
    FinalFrame = challenges;
    break;
  case "task":
    FinalFrame = task;
    break;
}
---

<tr class="advancementTr">
  <td>
    <div
      class="relative flex justify-center items-center w-14 h-14"
      style={{
        backgroundImage: `url('${FinalFrame.src}')`,
        backgroundSize: "contain",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
      }}
    >
      {icon ? <img src={icon} width="32" height="32" alt="" /> : "-"}
    </div>
  </td>
  <td class="break-words!whitespace-pre-wrap"
    ><b>{title} <br /> <small>{enTitle}</small></b></td
  >
  <td>{description ?? "-"}</td>
  <td>
    {parent ?? "-"}
  </td>
  <td set:html={require?.length ? require : "-"} />
  <td><code>{id ?? "-"}</code></td>
</tr>

<style>
  .advancementTr > td {
    white-space: pre-wrap !important;
  }
</style>
